<html>
<head>

<script type="text/javascript" src="/<?php echo PROJECTNAME; ?>/assets/js/framework/jquery.js"></script>
<script type="text/javascript" src="/<?php echo PROJECTNAME; ?>/assets/js/framework/jquery-format-num.js"></script>
<link rel="stylesheet" type="text/css" href="/<?php echo PROJECTNAME; ?>/assets/css/listtop.css" />
<script>
	$(document).ready(function() {
		$(".warning-numeric").format({autofix:true},function(){alert("Not an number");});
		
	  	$("#btn_update").click(function(){
		  	if ($("#txt_name").val() !="" && $("#txt_score").val()!=""){
			  	
		  		$.post("update",
		  			{
	  					'name':$("#txt_name").val(),
	  					'score': $("#txt_score").val() 
	  				},
		  			function(data){
	  		  			if(data){
	  	  		  			alert(data.status);
	  		  				var list = data.listtop10;
	  		  				var str_html_listtop10 = "<table align='center' width='400px'><tr><th>No</th><th>Name</th><th>Score</th></tr>";
	  		  				for(var i=1;i<= list.length;i++){
	  	  		  				var item= list[i-1];
	  	  		  				str_html_listtop10 +="<tr><td align='center'>" +i+"</td>";
	  		  					str_html_listtop10 +="<td>" +item.name+"</td>";
	  		  					str_html_listtop10 +="<td align='right'>" +item.point+"</td></tr>"; 
	  		  				}
	  		  				$("#list_top10").html(str_html_listtop10);
	  		  				$("input[type=text]").val("");
	  		  			}
	  		  			
		  			},"json");
		  	}
	  	});
	});
</script>

</head>

<body>
<div style="text-align:center;">
	<div id="list_top10"> 
		List top 10 score
		
		<table align="center" width="400px">
				<tr>
					<th>No</th>
					<th>Name</th>
					<th>score</th>
				</tr>
				<?php $i =1 ?>
				<?php	foreach ($result as $row) { ?>
				<tr>
					<td align="center"><?php echo $i ?></td>
					<td><?php echo $row->name ?></td>
					<td align="right"> <?php echo $row->point?></td>
					<?php $i = $i + 1 ?>
				</tr>
				<?php   }?>
		</table>
	</div>
	<br><br><br><br>
	<table align="center">
		<tr>
			<td>
				Name<input type="text" id="txt_name"></input>
			</td>
			<td>
				Score<input type="text" id="txt_score" maxlength="10" class="warning-numeric"></input>
			</td>
		</tr>
		<tr>	
			<td colspan="2" align="center">
				<input type="button" id="btn_update" value="Update"> </input>
			</td>
		</tr>
	</table>
</div>	

</body>
</html>
